<template>
	<div class="data-list-container">
		<!-- 加载状态 -->
		<div v-if="loading && dataList.length === 0" class="loading-container">
			<van-loading type="spinner" color="#049DFC" vertical> 加载中... </van-loading>
		</div>

		<!-- 数据列表 -->
		<div class="task-item-list">
			<!-- 空状态 -->
			<van-empty v-if="!loading && dataList.length === 0" description="暂无任务数据" />

			<!-- 列表项 -->
			<div
				v-for="item in dataList"
				:key="item.id || item.srcDataId"
				:class="['task-item', { read: item.processStatus === '1' }]"
				@click="handleItemClick(item)"
			>
				<!-- 标题区域 -->
				<div class="task-item-hd">
					<p class="item-paikou">{{ item.pollutionSourceName }}</p>
					<div class="tag-item-view">
						<span class="tag-rwlxmc">{{ item.dataLabel }}</span>
						<span
							v-for="dataCategory in item.dataCategory"
							:key="dataCategory"
							v-show="item.srcTableName !== 'v_biz_zczj_fac_check'"
							class="tag-rwlbmc"
						>
							{{ dataCategory }}
						</span>
					</div>
				</div>

				<!-- 主要内容 -->
				<div class="task-item-bd">
					<van-row>
						<van-col :span="5">
							<span class="item-pointer">
								<template v-if="item.srcTableName === 'biz_problem_rectify'">整改内容：</template>
								<template v-else-if="item.srcTableName === 'biz_report_things'">上报内容：</template>
								<template v-else-if="item.srcTableName === 'biz_facility_check_hhw'">贮存情况：</template>
								<template v-else-if="item.srcTableName === 'biz_facility_check_graywate'">说明：</template>
								<template v-else-if="item.srcTableName === 'v_biz_zczj_fac_check'">设施名称：</template>
								<template v-else>排口：</template>
							</span>
						</van-col>
						<van-col :span="19">
							<span class="task-item-ft-text value-text">{{ item.des || '' }}</span>
						</van-col>
					</van-row>
				</div>

				<!-- 自查自纠特殊显示 -->
				<div v-if="item.srcTableName === 'v_biz_zczj_fac_check'" class="task-item-bd">
					<van-row>
						<van-col :span="5">
							<span class="item-pointer">检查项：</span>
						</van-col>
						<van-col :span="19">
							<span class="task-item-ft-text value-text-all">{{ item.ext1 || '' }}</span>
						</van-col>
					</van-row>
				</div>

				<div v-if="item.srcTableName === 'v_biz_zczj_fac_check'" class="task-item-bd">
					<van-row>
						<van-col :span="5">
							<span class="item-pointer">检查结果：</span>
						</van-col>
						<van-col :span="19">
							<span class="task-item-ft-text value-text">{{ item.ext2 || '' }}</span>
						</van-col>
					</van-row>
				</div>

				<!-- 底部信息 -->
				<div v-if="item.fillUser" class="task-item-bd">
					<van-row>
						<van-col :span="12">
							<van-icon name="https://wx.ksepia.com/profile/mini-image/do-task-time-icon.png" size="12" />
							<span class="task-item-ft-text dead-time">{{ item.fillTime }}</span>
						</van-col>
						<van-col :span="12">
							<div class="item-distance">
								<van-icon name="https://wx.ksepia.com/profile/mini-image/do-task-user-icon@3x.png" size="12" />
								{{ item.fillUser }}
							</div>
						</van-col>
					</van-row>
				</div>
			</div>

			<!-- 底部提示 -->
			<van-divider v-if="dataList.length === total && hasScrolled && !loading" content-position="center"> 我也是有底线的 </van-divider>
		</div>
	</div>
</template>

<script>
import { ref, watch, onMounted } from 'vue'
import { showToast } from 'vant'
import * as dataSummaryApi from '@/api/dataSummary'

export default {
	name: 'DataList',
	props: {
		filterForm: {
			type: Object,
			default: () => ({}),
		},
	},
	emits: ['item-click'],
	setup(props, { emit }) {
		// 响应式数据
		const loading = ref(false)
		const dataList = ref([])
		const pageNum = ref(1)
		const pages = ref(0)
		const total = ref(0)
		const hasScrolled = ref(false)

		// 处理数据项点击
		const handleItemClick = (item) => {
			emit('item-click', item)
		}

		// 加载数据列表
		const loadDataList = async (isRefresh = false) => {
			if (isRefresh) {
				pageNum.value = 1
				dataList.value = []
				hasScrolled.value = false
			}

			loading.value = true

			try {
				const params = {
					...props.filterForm,
					pageNum: pageNum.value,
					pageSize: 10,
				}

				const response = await dataSummaryApi.getDataSummaryList(params)

				if (response.code === '0') {
					// 处理数据
					const rows = response.rows.map((item) => ({
						...item,
						dataCategory: item.dataCategory ? item.dataCategory.split(',') : [],
					}))

					const currentList = isRefresh ? [] : dataList.value
					dataList.value = currentList.concat(rows)
					pages.value = response.pages
					total.value = response.total
				} else {
					showToast(response.message || '获取数据失败')
				}
			} catch (error) {
				console.error('获取数据列表失败:', error)
				showToast('网络错误，请稍后重试')
			} finally {
				loading.value = false
			}
		}

		// 刷新数据
		const refreshData = () => {
			loadDataList(true)
		}

		// 加载更多数据
		const loadMore = () => {
			const nextPage = pageNum.value + 1
			if (nextPage > pages.value) return

			pageNum.value = nextPage
			hasScrolled.value = true
			loadDataList()
		}

		// 监听筛选条件变化
		watch(
			() => props.filterForm,
			() => {
				refreshData()
			},
			{ deep: true }
		)

		// 暴露方法给父组件
		const exposed = {
			refreshData,
			loadMore,
		}

		onMounted(() => {
			loadDataList(true)
		})

		return {
			loading,
			dataList,
			total,
			hasScrolled,
			handleItemClick,
			refreshData,
			...exposed,
		}
	},
}
</script>

<style lang="less" scoped>
.data-list-container {
	height: 100%;
	background: #f0f0f0;
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
}

.task-item-list {
	padding: 10px 16px;
	min-height: 100%;
	background: #f0f0f0;
}

.task-item {
	margin-bottom: 10px;
	border-radius: 3px;
	background: #fff;
	padding: 0 0 0 15px;
	cursor: pointer;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		background: #f8f8f8;
	}

	&.read {
		opacity: 0.7;
	}
}

.task-item-hd {
	padding: 10px 0;
	position: relative;

	.item-paikou {
		color: #333;
		font-weight: 600;
		margin: 0 0 8px 0;
	}
}

.tag-item-view {
	position: relative;

	.tag-rwlxmc {
		background-color: #f2f6ff;
		color: #625efd;
		font-size: 10px;
		font-weight: 600;
		padding: 2px 4px;
		margin-right: 10px;
		border-radius: 2px;
	}

	.tag-rwlbmc {
		background-color: #eefdf4;
		color: #31e087;
		font-size: 10px;
		font-weight: 600;
		padding: 2px 4px;
		margin-right: 10px;
		border-radius: 2px;
	}
}

.task-item-bd {
	padding: 0 0 10px 0;

	.item-pointer {
		font-size: 14px;
		font-weight: 600;
		color: #202739;
	}
}

.task-item-ft-text {
	font-size: 12px;
	line-height: 20px;
	color: #666;
	padding-left: 5px;
}

.value-text {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	word-break: break-all;
	padding: 2px 0 0 0;
}

.value-text-all {
	padding: 2px 0 0 0;
}

.item-distance {
	color: #999;
	font-size: 12px;
	text-align: right;
	margin: 0 10px 0 10px;
	padding: 5px 0 0 0;

	.van-icon {
		margin-right: 10px;
	}
}

.dead-time {
	margin-left: 3px;
}
</style>
